<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--slot 插槽 ：内容分发、自定义事件 综合语法使用版-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <!--自定义事件 remove 调用顶层组件的删除数组元素方法-->
        <todo-content slot="todo-content" v-for="(item,index) in content" v-bind:content="item" v-bind:index="index" v-on:remove="removeContent(index)"></todo-content>
    </todo>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    Vue.component("todo",{
        template:
            "<div>\
                  <slot name='todo-title'></slot>\
                  <ul>\
                    <slot name='todo-content'></slot>\
                  </ul>\
            </div>\
            "

    })
    // 自定义子组件，可以根据具体情况自定义html元素， 父组件插槽可替换，占位符效果
    // 不写死数据，采用props 属性传值，
    Vue.component("todo-title",{
        props: ['title'],
        template:
            "<h1>{{title}}</h1>"
    })
    // 这里定义的属性content 上面v-bind:content 绑定属性也和这里一样  而不是下面的data里面的属性content，data里的可以随意定义，知识for循环式 in 后面用
    Vue.component("todo-content",{
        props: ['content','index'],
        template:
            "<li>{{index}}.{{content}}<button @click='remove(index)'>删除</button></li>",
        methods: {
            remove: function (i) {
                // 删除方法1：子组件中使用点击事件，调用顶层组件的删除方法，并根据索引删除具体项。需要调用父父组件的删除方法，删除元素，因为数组元素在父父组件定义，所以子组件不可能写方法删除他，只能调用父父组件的删除方法
                // vm.removeContent(i)
                // alert(i)
                // 删除方法2：通过自定义事件 v-on:remove 绑定顶层组件的删除方法，这里点击事件来触发自定义事件remove,并传参数
                this.$emit('remove',i)

            }
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {
            title: "代办事项",
            content: ["aab","huangshang","sasdaskdas","sadjshjdjkas"]
        },
        methods: {
            removeContent: function (index) {
                // 元素移除
                this.content.splice(index,1)
            }
        }
    })
</script>
</body>
</html>